import React, { useState,useEffect,useContext } from 'react';
import {
  MessageOutlined,
  UserOutlined,
  HomeOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import { Layout,Button,theme,Typography, ColorPicker,Menu, ConfigProvider,   } from 'antd';
import { useHistory,Route,Switch } from 'react-router-dom/cjs/react-router-dom.min';
import HomePage from './HomePage';
import Publish from './Publish';
import Personalpage from './Pensonalpage';
import Message from './Message/Message';
import PostDetail from './PostDetail';
import logo from '../../asses/images/1.png'
import Book from './Book';
const {Sider,} = Layout;
const {Text} =Typography


const Side = () => {

  const history = useHistory()

  //跳转到首页
  const [value,setvalue] = useState('')
  const HandleHome= ({key})=>{
    setvalue(key)
    history.push('/home')
    localStorage.setItem('values', JSON.stringify(key));

  }
  const HandlePub =({key})=>{
    setvalue(key)
    history.push('/publish')
    localStorage.setItem('values', JSON.stringify(key));

  }
  const HandleMsg =({key})=>{
    setvalue(key)
    history.push('/message')
    localStorage.setItem('values', JSON.stringify(key));

  }
  const HandlePsn =({key})=>{
    setvalue(key)
    history.push('/person')
    localStorage.setItem('values', JSON.stringify(key));

  }


  const [isRefresh,setisRefresh] = useState(true)

  useEffect(()=>{
    if(!isRefresh){
        inLocation()
    }else{
        setisRefresh(false)
    }
},[isRefresh])
const inLocation = () =>{
    const load = localStorage.getItem('values')
    setvalue(JSON.parse(load))
}

//背景图设置
// const { primary, setPrimary, backprimary, setBackprimary } = useContext(ThemeContext)
const [primary, setPrimary] = useState('#3ACE24');
  const [backprimary, setBackprimary] = useState('#ffffff');
  return (
  <>
    <ConfigProvider
    theme={{
      token: {
        colorPrimary: primary,
        borderRadius:20,
        colorBgContainer:'#f6ffed'
      },
    }}
  >   
      
    <Layout>
      <Sider
      style={{
        borderRadius:30,
        background:backprimary,
        marginRight:33,
        marginTop:10,
        marginBottom:10,
      }} trigger={null} collapsible >
       <img src={logo} style={{height:80}} />
      {/* 主题颜色 */}
    {/* <ColorPicker value={primary} onChangeComplete={(color) => setPrimary(color.toHexString())} /> */}
  
      {/* 导航栏 */}
        <Menu
        style={{
          minHeight:'65vh',
        background:backprimary,
        }}
          mode="inline"
          defaultSelectedKeys={['1']}
          selectedKeys={[value]}
        >
          <Menu.Item 
          style={{
            margin:'20px 0',
            height:50,
            fontSize:17,
            
        }}
          key='1'
          icon={<HomeOutlined/>}
          label="首页"
          onClick={HandleHome}

          >
            首页
          </Menu.Item>
          <Menu.Item
          style={{
            margin:'20px 0',
            height:50,
            fontSize:17
        }}
          key='2'
          icon={<VideoCameraOutlined />}
          label="发布"
          onClick={HandlePub}
          >
            发布
          </Menu.Item>
          <Menu.Item
          key='3'
          style={{
            margin:'20px 0',
            height:50,
            fontSize:17
        }}
          icon={<MessageOutlined />}
          label="消息"
          onClick={HandleMsg}
          >
            {/* <Badge color='#52c41a' count={3} offset={[30]}> */}
            消息
            {/* </Badge> */}

          </Menu.Item>
          <Menu.Item
         style={{
          margin:'20px 0',
          height:50,
          fontSize:17
      }}
          key='4'
          icon={<UserOutlined />}
          label="个人"
          onClick={HandlePsn}
          >
            个人
          </Menu.Item>

        </Menu>

        <div style={{display:'flex',justifyContent:'center'}} >
        <div style={{width:140}}>
        <Text style={{ fontSize:13, textAlign:'center'}} type='secondary'>
          该网站由“快乐H5小组”独家提供😊
        </Text>
        <br/>
        <Text style={{ fontSize:13, textAlign:'center'}} type='secondary'>
          如需合作~请联系2867154361@qq.com
        </Text>
        </div>
        </div>
      {/* 主题颜色 */}
      <div style={{
        display:'flex',
        justifyContent:'center',
        alignItems:'center',
        marginTop:10
    }}>
      <ColorPicker value={primary} onChangeComplete={(color) => setPrimary(color.toHexString())} />
      {/* 背景颜色 */}
      <ColorPicker style={{marginLeft:40}} value={backprimary} onChangeComplete={(color) => setBackprimary(color.toHexString())} />
      </div>
      </Sider>
        
      <Switch>
        <Route path='/home'>
          <HomePage />
        </Route>
        <Route path='/publish'>
          <Publish />
        </Route>
        <Route path='/person'>
          <Personalpage />
        </Route>
        <Route path='/message'>
          <Message />
        </Route>
        <Route path='/postDetail'>
          <PostDetail />
        </Route>
        <Route path='/book'>
          <Book />
        </Route>
      
      </Switch>
      
    
    </Layout>
  </ConfigProvider>
  </>
  );
};


export default Side